<template>
  <div class="hourly-grid">
    <div class="hourly-header">
      <div
        class="header-cell"
        v-for="(header, index) in headers"
        :style="{ borderRight: index % 2 ? '1px solid transparent' : '', borderLeft: index % 2 ? '1px solid transparent' : '' }"
        :key="index">
        {{ header }}
      </div>
    </div>
    <div class="hourly-body">
      <div
        class="column"
        v-for="(col, colIndex) in hourData"
        :key="colIndex">
        <div
          class="cell"
          :style="{
            backgroundColor: col[rowIndex - 1]?.value !== undefined ? col[rowIndex - 1].bgColor : '',
            borderRight: colIndex % 2 ? '1px solid transparent' : '',
            borderLeft: colIndex % 2 ? '1px solid transparent' : ''
          }"
          v-for="rowIndex in maxRows"
          :key="rowIndex"
          :title="col[rowIndex - 1]?.value !== undefined ? `${+col[rowIndex - 1]?.name + '-' + (+col[rowIndex - 1]?.name + 1)}点` : ''">
          {{ col[rowIndex - 1]?.value }}
        </div>
      </div>
    </div>
    <div class="hourly-footer">
      <div
        class="column"
        v-for="(col, colIndex) in footers"
        :key="colIndex">
        <div class="footer-content">
          <div class="bar-box">
            <div
              class="bar"
              :style="{ height: (+col.average / maxValueOfAverageHour) * 100 + '%', backgroundColor: col.bgColor }">
              <div class="bar-text">{{ col.average }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, computed, watch } from 'vue'

  const props = defineProps({
    chartData: {
      type: Object,
      default: []
    }
  })

  const headers = ['0-7点', '7-9点', '9-11点', '11-14点', '14-17点', '17-19点', '19-24点']
  const footers = ref([])
  const hourData = ref([[]])

  const maxRows = 7
  const maxValueOfAverageHour = computed(() => Math.max(...footers.value.map(item => item.average)))
  const maxValueOfEveryHour = computed(() => Math.max(...props.chartData.map(item => +item.value)))
  const getDataAvarage = data => {
    footers.value = data.map(group => {
      const sum = group.reduce((acc, item) => acc + item.value, 0)
      const average = group.length ? sum / group.length : 0
      let obj = {
        average: average.toFixed(2),
        bgColor: getBgColor(maxValueOfAverageHour.value, average)
      }
      return obj
    })
  }
  const getBgColor = (maxValue, data) => {
    if (maxValue === 0) {
      return '#2275F0'
    } else {
      if (data >= maxValue * 0.7) {
        return '#0C3B99'
      } else if (data >= maxValue * 0.3 && data < maxValue * 0.7) {
        return '#1555C2'
      } else {
        return '#2275F0'
      }
    }
  }
  const handleChartData = data => {
    data.forEach(item => {
      item.bgColor = getBgColor(maxValueOfEveryHour.value, +item.value)
    })
    hourData.value = []
    headers.forEach((header, headerIndex) => {
      hourData.value[headerIndex] = []
      switch (headerIndex) {
        case 0:
          hourData.value[headerIndex] = data.filter(item => +item.name < 7)
          break
        case 1:
          hourData.value[headerIndex] = data.filter(item => +item.name > 6 && +item.name < 9)
          break
        case 2:
          hourData.value[headerIndex] = data.filter(item => +item.name > 8 && +item.name < 11)
          break
        case 3:
          hourData.value[headerIndex] = data.filter(item => +item.name > 10 && +item.name < 14)
          break
        case 4:
          hourData.value[headerIndex] = data.filter(item => +item.name > 13 && +item.name < 17)
          break
        case 5:
          hourData.value[headerIndex] = data.filter(item => +item.name > 16 && +item.name < 19)
          break
        case 6:
          hourData.value[headerIndex] = data.filter(item => +item.name > 18 && +item.name < 24)
          break
        default:
          break
      }
    })
  }

  watch(
    () => props.chartData,
    newVal => {
      if (newVal.length) {
        // newVal.forEach((element, index) => {
        //   element.value = 10 + index * 100
        // })
        handleChartData(newVal)
        getDataAvarage(hourData.value)
        // console.log('shijian  改变')
      }
    },
    { deep: true, immediate: true }
  )
  onMounted(() => {})
</script>

<style scoped lang="scss">
  .hourly-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #fff;
    .hourly-header {
      display: flex;
      .header-cell {
        flex: 1;
        padding: pxTvh(10) pxTvw(10);
        text-align: center;
        border: 1px solid #3a5592;
        border-bottom: none;
        box-sizing: border-box;
      }
    }

    .hourly-body {
      display: flex;
    }

    .hourly-footer {
      display: flex;
      .column {
        height: pxTvh(80);
        .footer-content {
          height: 100%;
          display: flex;
          flex-direction: column;
          padding-top: pxTvh(10);
          .bar-box {
            flex: 1;
            .bar {
              width: 50%;
              margin: 0 auto;
              background-color: #2275f0;
              position: relative;
              .bar-text {
                position: absolute;
                bottom: pxTvh(-24);
                left: 50%;
                transform: translateX(-50%);
              }
            }
          }
        }
      }
    }
    .column {
      flex: 1;
      display: flex;
      flex-direction: column;
      .cell {
        flex: 1;
        padding: pxTvh(10) pxTvw(10);
        text-align: center;
        border: 1px solid #3a5592;
        box-sizing: border-box;
        &:not(:last-child) {
          border-bottom: none;
        }
      }
    }
  }
</style>
